<template>
  <el-dialog
    title="分配角色"
    :visible="showSetRoleVisible"
    width="30%"
    @close="closeDialog"
    @open="showDialog"
  >
    <!-- el-checkbox-group 复选框组 v-model的值是一个数组 -->
    <el-checkbox-group v-model="checkList" v-loading="loading">
      <!-- el-checkbox 是每一个项, 默认选中的项中label会同步到数组中 ,展示文本 {{}}在checkbox标签中写 -->
      <el-checkbox v-for="item in rolesList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetRolesList } from '@/api/setting'
import { reqGetUserDetailById } from '@/api/user'
import { reqAssignRole } from '@/api/employees'
export default {
  props: {
    showSetRoleVisible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      rolesList: [], // 所有角色列表
      checkList: [], // 复选框组关联的数组
      loading: false
    }
  },
  /*  created() {
    this.getAllRolesList()
  }, */
  methods: {
    closeDialog() {
      // 通知父组件关闭对话框
      this.$emit('update:showSetRoleVisible', false)
    },
    // 为对话框绑定@open事件, 在对话框打开的时候再去回去角色列表
    showDialog() {
      this.getAllRolesList()
    },
    // 获取所有角色列表
    async getAllRolesList() {
      // 如何以最快的方式获取到多个并发请求的结果  Promise.all 等待机制  Promise.race 赛跑机制
      /*  this.loading = true
      // 1. 获取所有角色列表
      const { data: { rows }} = await reqGetRolesList(1, 99999) // 10s
      // 2. 获取点击的用户信息
      const { data: { roleIds }} = await reqGetUserDetailById(this.userId) // 6s
      console.log(roleIds) // 点击的用户的已有角色
      // 将已有角色赋值给checkList
      this.checkList = roleIds
      this.rolesList = rows
      this.loading = false */

      this.loading = true
      Promise.all([reqGetRolesList(1, 99999), reqGetUserDetailById(this.userId)]).then(values => {
        // console.log(values) // values是多个promise响应的结果
        this.rolesList = values[0].data.rows
        this.checkList = values[1].data.roleIds
        this.loading = false
      })
    },
    // 分配角色
    async handleSubmit() {
      // 1. 发送请求
      await reqAssignRole(this.userId, this.checkList)
      // 2. 关闭对话框
      this.closeDialog()
    }

  }

}
</script>

<style>

</style>
